<script setup>
import { onMounted, ref } from 'vue'
import { getoneList, deleTone, addOneList, updateOne } from '@/api/one'
import { message } from 'ant-design-vue'
defineOptions({
  name: 'YitiganManage'
})
const columns = ref([
  {
    title: '序号',
    customRender: ({ index }) =>
      `${+index + 1 + pageParams.value.pageSize * (pageParams.value.page - 1)}`
  },
  { title: '一体杆名称', dataIndex: 'poleName', key: 'poleName' },
  { title: '一体杆编号', dataIndex: 'poleNumber', key: 'poleNumber' },
  { title: '一体杆IP', dataIndex: 'poleIp' },
  { title: '安装区域', dataIndex: 'areaName' },
  { title: '一体杆类型', dataIndex: 'poleType' },
  { title: '运行状态', dataIndex: 'poleStatus' },
  { title: '操作', dataIndex: 'operate' }
])
const list = ref([])
const options = ref([])
const formRef = ref(null)
//查询
const inquire = () => {
  getlistAPI()
}
// 批量删除数据
const ids = ref(null)
// 点击多选框,获取选中行的id
// selectedRows
const rowSelection = {
  onChange: (selectedRowKeys) => {
    ids.value = selectedRowKeys.join(',')
    console.log(ids.value)
  }
}
// 批量删除方法
const delLists = async () => {
  if (ids.value === '') return message.success('请选择要删除的一体杆')

  const res = await deleTone(ids.value)
  console.log(res)
  message.success('删除一体杆成功')
}

// 添加弹框
const showDialog = ref(false)
const showEditDialog = ref(false)

const onFinish = async (values) => {
  // console.log(values)
  await addOneList(values)
  message.success('添加成功')
  btnCancel() //关闭弹层
}

const onFinished = async () => {
  console.log(editRows.value)
  await updateOne(editRows.value)
  // console.log()
  btnCancel()
}
// 关闭弹层
const btnCancel = () => {
  formRef.value.resetFields() //重置
  showDialog.value = false
  showEditDialog.value = false
}
// 表单校验
const dataForm = ref({
  poleName: '',
  poleNumber: '',
  poleIp: '',
  areaId: '',
  poleType: '',
  areaName: ''
})
const editRows = ref({
  id: '',
  poleName: '',
  poleNumber: '',
  poleIp: '',
  areaId: '',
  poleType: ''
})
// 点击编辑
const editOneAPI = async (record) => {
  showEditDialog.value = true
  editRows.value.id = record.id
  editRows.value.poleName = record.poleName
  editRows.value.poleNumber = record.poleNumber
  editRows.value.poleIp = record.poleIp
  editRows.value.areaId = record.areaId
  editRows.value.poleType = record.poleType
  console.log(record)
}
// 删除
const delOneAPI = async (id) => {
  await deleTone(id)
  message.success('删除成功')
  getlistAPI()
}
// 页码总数
const totalCount = ref(0)
// 获取数据
const getlistAPI = async () => {
  const res = await getoneList(pageParams.value)
  list.value = res.data.rows
  options.value = res.data.rows
  totalCount.value = res.data.total
}
// 页码总条数
const showTotal = () => {
  return `总共${totalCount.value}条`
}
// 分页数据
const pageParams = ref({
  page: 1,
  pageSize: 10,
  poleName: '',
  poleNumber: '',
  poleStatus: ''
})
// 页码或 pageSize 改变的回调，参数是改变后的页码及每页条数
const changePage = (newPage) => {
  // alert(newPage)
  pageParams.value.page = newPage //将新页码赋值
}
onMounted(() => {
  getlistAPI()
})
</script>
<template>
  <a-card class="content">
    <!-- 搜索框 -->
    <div class="search">
      <a-form>
        <a-row type="flex" justify="start" :gutter="16">
          <a-col>
            <a-form-item label="一体杆名称" style="width: 100%">
              <a-input placeholder="请输入一体杆名称" v-model:value="pageParams.poleName"></a-input>
            </a-form-item>
          </a-col>
          <a-col>
            <a-form-item label="一体杆编号" style="width: 100%">
              <a-input
                placeholder="请输入一体杆编号"
                v-model:value="pageParams.poleNumber"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col>
            <a-form-item label="运行状态" style="width: 225px">
              <a-select
                placeholder="请选择运行状态"
                tyle="width: 100%"
                v-model:value="pageParams.poleStatus"
              >
                <a-select-option style="width: 100%" value="全部">全部</a-select-option>
                <a-select-option style="width: 100%" value="0">正常</a-select-option>
                <a-select-option style="width: 100%" value="1">异常</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col>
            <a-button type="primary" @click="inquire">查询</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 按钮 -->
    <div class="btn">
      <a-space>
        <a-button type="primary" @click="showDialog = true" style="border-radius: 5px"
          >添加一体杆</a-button
        >
        <a-button @click="delLists" style="border-radius: 5px">批量删除</a-button>
      </a-space>
    </div>
    <!-- 表单 -->
    <!-- 表格将分页组件合二为一 -->
    <div class="table">
      <a-table
        :dataSource="list"
        rowKey="id"
        :row-selection="rowSelection"
        :columns="columns"
        :pagination="{
          total: totalCount,
          'show-total': showTotal,
          showQuickJumper: true,
          current: pageParams.page,
          pageSize: pageParams.pageSize,
          onChange: changePage
        }"
      >
        <!-- 操作模块 -->
        <template v-slot:bodyCell="{ column, record }">
          <a-space v-if="column.dataIndex === 'operate'">
            <a-button type="link" @click="editOneAPI(record)">编辑</a-button>
            <a-popconfirm title="是否确认删除当前选中的一体杆？" @confirm="delOneAPI(record.id)">
              <a-button type="link">删除</a-button>
            </a-popconfirm>
          </a-space>
          <template v-if="column.dataIndex === 'poleType'">
            {{ record.poleType === 'export' ? '出口' : '入口' }}
          </template>

          <template v-if="column.dataIndex === 'poleStatus'">
            {{ record.poleStatus === 0 ? '正常' : '异常' }}
          </template>
        </template>
      </a-table>
    </div>
  </a-card>
  <div>
    <a-modal :footer="null" :visible="showDialog" title="添加一体杆" @cancel="btnCancel">
      <a-form ref="formRef" :model="dataForm" :rules="rules" @finish="onFinish">
        <a-form-item
          name="poleName"
          label="一体杆名称"
          style="display: block"
          :rules="[{ required: true, message: '请输入一体杆名称' }]"
        >
          <a-input v-model:value="dataForm.poleName" placeholder="请输入一体杆名称"></a-input>
        </a-form-item>
        <a-form-item
          name="poleNumber"
          label="一体杆编号"
          style="display: block"
          :rules="[{ required: true, message: '请输入一体杆编号' }]"
        >
          <a-input v-model:value="dataForm.poleNumber" placeholder="请输入一体杆编号"></a-input>
        </a-form-item>
        <a-form-item
          name="poleIp"
          label="一体杆IP"
          style="display: block"
          :rules="[{ required: true, message: '请输入一体杆IP' }]"
        >
          <a-input v-model:value="dataForm.poleIp" placeholder="请输入一体杆IP"></a-input>
        </a-form-item>
        <a-form-item
          name="areaId"
          label="关联区域"
          style="display: block"
          :rules="[{ required: true, message: '请输入关联区域' }]"
        >
          <a-select
            :field-names="{ label: 'areaName', value: 'areaId' }"
            v-model:value="dataForm.areaId"
            show-search
            placeholder="请选择关联区域"
            :options="options"
          ></a-select>
        </a-form-item>
        <a-form-item
          name="poleType"
          label="一体杆类型"
          style="display: block"
          :rules="[{ required: true, message: '请输入一体杆类型' }]"
        >
          <a-select v-model:value="dataForm.poleType" placeholder="请选择一体杆类型">
            <a-select-option :value="'entrance'">入口</a-select-option>
            <a-select-option :value="'export'">出口</a-select-option>
          </a-select>
        </a-form-item>
        <div class="modal-footer">
          <a-form-item type="flex" justify="center">
            <a-row type="flex" justify="end">
              <a-space>
                <a-button @click="btnCancel" style="border-radius: 5px">取消</a-button>
                <a-button type="primary" html-type="submit" style="border-radius: 5px"
                  >确定</a-button
                >
              </a-space>
            </a-row>
          </a-form-item>
        </div>
      </a-form>
    </a-modal>
  </div>
  <div>
    <a-modal :footer="null" :visible="showEditDialog" title="编辑一体杆" @cancel="btnCancel">
      <a-form ref="formRef" :model="editRows" :rules="rules" @finish="onFinished">
        <a-form-item
          name="poleName"
          label="一体杆名称"
          style="display: block"
          :rules="[{ required: true, message: '请输入一体杆名称', trigger: 'change' }]"
        >
          <a-input v-model:value="editRows.poleName" placeholder="请输入一体杆名称"></a-input>
        </a-form-item>
        <a-form-item
          name="poleNumber"
          label="一体杆编号"
          style="display: block"
          :rules="[{ required: true, message: '请输入一体杆编号', trigger: 'change' }]"
        >
          <a-input
            v-model:value="editRows.poleNumber"
            placeholder="请输入一体杆编号"
            :disabled="true"
          ></a-input>
        </a-form-item>
        <a-form-item
          name="poleIp"
          label="一体杆IP"
          style="display: block"
          :rules="[{ required: true, message: '请输入一体杆IP', trigger: 'change' }]"
        >
          <a-input v-model:value="editRows.poleIp" placeholder="请输入一体杆IP"></a-input>
        </a-form-item>
        <a-form-item
          name="areaId"
          label="关联区域"
          style="display: block"
          :rules="[{ required: true, message: '请选择关联区域', trigger: 'change' }]"
        >
          <a-select
            :field-names="{ label: 'areaName', value: 'areaId' }"
            v-model:value="editRows.areaId"
            show-search
            placeholder="请选择关联区域"
            :options="options"
          ></a-select>
        </a-form-item>
        <a-form-item
          name="poleType"
          label="一体杆类型"
          style="display: block"
          :rules="[{ required: true, message: '请选择一体杆类型', trigger: 'change' }]"
        >
          <a-select v-model:value="editRows.poleType" placeholder="请选择一体杆类型">
            <a-select-option :value="'entrance'">入口</a-select-option>
            <a-select-option :value="'export'">出口</a-select-option>
          </a-select>
        </a-form-item>
        <div class="modal-footer">
          <a-form-item type="flex" justify="center">
            <a-row type="flex" justify="end">
              <a-space>
                <a-button @click="btnCancel" style="border-radius: 5px">取消</a-button>
                <a-button type="primary" html-type="submit" style="border-radius: 5px"
                  >确定</a-button
                >
              </a-space>
            </a-row>
          </a-form-item>
        </div>
      </a-form>
    </a-modal>
  </div>
</template>
<style>
.content {
  margin-top: 20px;
  margin-left: 25px;
}
.search {
  border-bottom: 1px solid rgb(227, 227, 227, 0.9);
}
.btn {
  margin-top: 20px;
}

.table {
  margin-top: 20px;
}
</style>
